<!--
 * @Author: C.
 * @Date: 2022-01-18 10:21:29
 * @LastEditTime: 2022-01-18 16:23:11
 * @Description: file content
-->
<template>
  <div>
    <jv-table :tableObj="tableObj"></jv-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "张三",
          age: 18,
          money: 1040,
          dateTime: "2022-01-12",
          custom: "2231"
        },
        {
          name: "李四",
          age: 19,
          money: 10450,
          dateTime: "2022-01-12",
          custom: "2231"
        },
        {
          name: "王五",
          age: 20,
          money: 1050454,
          dateTime: "2022-01-12",
          custom: "2231"
        },
        {
          name: "刘六",
          age: 21,
          money: 10770,
          dateTime: "2022-01-12",
          custom: "2231"
        }
      ],
      tableObj: {}
    };
  },
  created() {
    this.tableObj = this.$JTable({
      tableSchema: [
        {
          prop: "name",
          label: "名字",
          innerSearch: {
            prop: "name",
            cpn: "FormInput",
            label: "名字"
          }
        },
        {
          prop: "age",
          label: "年龄",
          innerSearch: {
            prop: "age",
            cpn: "FormSelect",
            label: "年龄",
            options: {
              list: [
                {
                  value: "18",
                  label: "18"
                },
                {
                  value: "19",
                  label: "19"
                },
                {
                  value: "20",
                  label: "20"
                }
              ]
            }
          }
        }
      ],
      formSchema: [
        {
          prop: "name",
          label: "名称",
          cpn: "FormInput"
        },
        {
          prop: "age",
          label: "年龄",
          cpn: "FormSelect",
          options: {
            list: [
              {
                value: "18",
                label: "18"
              },
              {
                value: "19",
                label: "19"
              },
              {
                value: "20",
                label: "20"
              }
            ]
          }
        },
        {
          prop: "Date",
          cpn: "DateRange",
          label: "时间范围"
        }
      ],
      title: "表单关联",
      data: this.tableData,
      operationCol: false
    });
  }
};
</script>
